<template>
  <el-dialog v-model="show" width="450px" class="rounded-[15px]">
    <el-form ref="formRef" :model="props.row" label-width="120" :rules="rules">
      <el-form-item label="手机号码" prop="phone">
        <el-input type="text" v-model="props.row.phone"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <ValidPhone v-model:code="props.row.code" :phone="props.row.phone" session-name="account_name"></ValidPhone>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="confirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ValidPhone from "@/components/validPhone/index.vue";
import { checkPhoneNumber } from "@/utils/eleValidate";
import { editPhone } from "@/api/modules/account";
import { FormRules, FormInstance } from "element-plus";

const show = ref(false);

const rules: FormRules = {
  phone: [{ required: true, validator: checkPhoneNumber }],
  code: [{ required: true, message: "验证码不可为空" }]
};

interface Props {
  row: any;
  getTable?: () => Promise<any>;
}

const props = ref<Props>({
  row: { code: "", phone: "" }
});

const open = (params: Props) => {
  props.value = params;
  show.value = true;
};

const formRef = ref<FormInstance>();
const confirm = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (!valid) return;
    try {
      await editPhone({ ...props.value.row });
      await props.value.getTable!();
      show.value = false;
    } catch (error) {}
  });
};

defineExpose({ open });
</script>

<style></style>
